<template>
  <!-- 会员概览卡片 -->
  <div class="components-overview-card">
    <div class="card-swiper-box">
      <!-- 左滑 -->
      <div
        ref="prevRef"
        class="slide-left-arrow disable"
        @click="prevPart"
      >
        <img
          src="@/assets/icon/slide-left-arrow@2x.png"
          alt=""
        >
      </div>
      <!-- 右滑 -->
      <div
        ref="nextRef"
        class="slide-right-arrow enable"
        @click="nextPart"
      >
        <img
          src="@/assets/icon/slide-right-arrow@2x.png"
          alt=""
        >
      </div>
      <!-- 列表 -->
      <div
        ref="boxRef"
        class="card-box"
      >
        <div
          ref="contentRef"
          class="card-list"
        >
          <div
            id="totalMember"
            :class="['card-item', curSelected === 0 ? 'active' : '']"
            @click="switchCards(0,$event)"
          >
            <p class="week-txt">
              {{ $t('dataAnalysis.totalMembership') }}
            </p>
            <p class="strong-num">
              {{ rateRatio.totalMember }}
            </p>
            <div :class="['rise-fall-rate', indexSwitch === 0 ? 'rise' : 'down' ]">
              <img
                v-if="rateRatio.totalMemberRate < 0"
                src="@/assets/icon/downArrow@2x.png"
                class="arrows"
              >
              <img
                v-if="rateRatio.totalMemberRate > 0"
                src="@/assets/icon/upArrow@2x.png"
                class="arrows"
              >
              <span
                v-if="rateRatio.totalMemberRate > 0"
                style="color:hsl(150deg 53% 58%)"
              > {{ Math.abs(rateRatio.totalMemberRate) + '%' }}</span>
              <span
                v-if="rateRatio.totalMemberRate < 0"
                style="color:hsl(0deg 100% 70%)"
              > {{ Math.abs(rateRatio.totalMemberRate) + '%' }}</span>
              <span v-if="rateRatio.totalMemberRate === 0"> - </span>
            </div>
          </div>
          <div
            id="newMember"
            :class="['card-item', curSelected === 1 ? 'active' : '']"
            @click="switchCards(1,$event)"
          >
            <p class="week-txt">
              {{ $t('dataAnalysis.numberOfNewMembers') }}
            </p>
            <p class="strong-num">
              {{ rateRatio.newMember }}
            </p>
            <div :class="['rise-fall-rate', indexSwitch === 1 ? 'rise' : 'down' ]">
              <img
                v-if="rateRatio.newMemberRate < 0"
                src="@/assets/icon/downArrow@2x.png"
                class="arrows"
              >
              <img
                v-if="rateRatio.newMemberRate > 0"
                src="@/assets/icon/upArrow@2x.png"
                class="arrows"
              >
              <span
                v-if="rateRatio.newMemberRate > 0"
                style="color:hsl(150deg 53% 58%)"
              > {{ Math.abs(rateRatio.newMemberRate) + '%' }}</span>
              <span
                v-if="rateRatio.newMemberRate < 0"
                style="color:hsl(0deg 100% 70%)"
              > {{ Math.abs(rateRatio.newMemberRate) + '%' }}</span>
              <span v-if="rateRatio.newMemberRate === 0"> - </span>
            </div>
          </div>

          <div
            id="payMember"
            :class="['card-item', curSelected === 2 ? 'active' : '']"
            @click="switchCards(2,$event)"
          >
            <p class="week-txt">
              {{ $t('dataAnalysis.numberOfPaidMembers') }}
            </p>
            <p class="strong-num">
              {{ rateRatio.payMember }}
            </p>
            <div :class="['rise-fall-rate', indexSwitch === 2 ? 'rise' : 'down' ]">
              <img
                v-if="rateRatio.payMemberRate < 0"
                src="@/assets/icon/downArrow@2x.png"
                class="arrows"
              >
              <img
                v-if="rateRatio.payMemberRate > 0"
                src="@/assets/icon/upArrow@2x.png"
                class="arrows"
              >
              <span
                v-if="rateRatio.payMemberRate > 0"
                style="color:hsl(150deg 53% 58%)"
              > {{ Math.abs(rateRatio.payMemberRate) + '%' }}</span>
              <span
                v-if="rateRatio.payMemberRate < 0"
                style="color:hsl(0deg 100% 70%)"
              > {{ Math.abs(rateRatio.payMemberRate) + '%' }}</span>
              <span v-if="rateRatio.payMemberRate === 0"> - </span>
            </div>
          </div>

          <div
            id="couponMember"
            :class="['card-item', curSelected === 3 ? 'active' : '']"
            @click="switchCards(3,$event)"
          >
            <p class="week-txt">
              {{ $t('dataAnalysis.numberOfCouponMembers') }}
            </p>
            <p class="strong-num">
              {{ rateRatio.couponMember }}
            </p>
            <div :class="['rise-fall-rate', indexSwitch === 3 ? 'rise' : 'down' ]">
              <img
                v-if="rateRatio.couponMemberRate < 0"
                src="@/assets/icon/downArrow@2x.png"
                class="arrows"
              >
              <img
                v-if="rateRatio.couponMemberRate > 0"
                src="@/assets/icon/upArrow@2x.png"
                class="arrows"
              >
              <span
                v-if="rateRatio.couponMemberRate > 0"
                style="color:hsl(150deg 53% 58%)"
              > {{ Math.abs(rateRatio.couponMemberRate) + '%' }}</span>
              <span
                v-if="rateRatio.couponMemberRate < 0"
                style="color:hsl(0deg 100% 70%)"
              > {{ Math.abs(rateRatio.couponMemberRate) + '%' }}</span>
              <span v-if="rateRatio.couponMemberRate === 0"> - </span>
            </div>
          </div>

          <div
            id="memberPayAmount"
            :class="['card-item', curSelected === 4 ? 'active' : '']"
            @click="switchCards(4,$event)"
          >
            <p class="week-txt">
              {{ $t('dataAnalysis.memberPaidAmount') }}
            </p>
            <p class="strong-num">
              {{ rateRatio.memberPayAmount }}
            </p>
            <div :class="['rise-fall-rate', indexSwitch === 4 ? 'rise' : 'down' ]">
              <img
                v-if="rateRatio.memberPayAmountRate < 0"
                src="@/assets/icon/downArrow@2x.png"
                class="arrows"
              >
              <img
                v-if="rateRatio.memberPayAmountRate > 0"
                src="@/assets/icon/upArrow@2x.png"
                class="arrows"
              >
              <span
                v-if="rateRatio.memberPayAmountRate > 0"
                style="color:hsl(150deg 53% 58%)"
              > {{ Math.abs(rateRatio.memberPayAmountRate) + '%' }}</span>
              <span
                v-if="rateRatio.memberPayAmountRate < 0"
                style="color:hsl(0deg 100% 70%)"
              > {{ Math.abs(rateRatio.memberPayAmountRate) + '%' }}</span>
              <span v-if="rateRatio.memberPayAmountRate === 0"> - </span>
            </div>
          </div>

          <div
            id="memberPayOrder"
            :class="['card-item', curSelected === 5 ? 'active' : '']"
            @click="switchCards(5,$event)"
          >
            <p class="week-txt">
              {{ $t('dataAnalysis.numberOfMemberPaidOrders') }}
            </p>
            <p class="strong-num">
              {{ rateRatio.memberPayOrder }}
            </p>
            <div :class="['rise-fall-rate', indexSwitch === 5 ? 'rise' : 'down' ]">
              <img
                v-if="rateRatio.memberPayOrderRate < 0"
                src="@/assets/icon/downArrow@2x.png"
                class="arrows"
              >
              <img
                v-if="rateRatio.memberPayOrderRate > 0"
                src="@/assets/icon/upArrow@2x.png"
                class="arrows"
              >
              <span
                v-if="rateRatio.memberPayOrderRate > 0"
                style="color:hsl(150deg 53% 58%)"
              > {{ Math.abs(rateRatio.memberPayOrderRate) + '%' }}</span>
              <span
                v-if="rateRatio.memberPayOrderRate < 0"
                style="color:hsl(0deg 100% 70%)"
              > {{ Math.abs(rateRatio.memberPayOrderRate) + '%' }}</span>
              <span v-if="rateRatio.memberPayOrderRate === 0"> - </span>
            </div>
          </div>

          <div
            id="memberSingleAmount"
            :class="['card-item', curSelected === 6 ? 'active' : '']"
            @click="switchCards(6,$event)"
          >
            <p class="week-txt">
              {{ $t('dataAnalysis.memberCustomerUnitPrice') }}
            </p>
            <p class="strong-num">
              {{ rateRatio.memberSingleAmount }}
            </p>
            <div :class="['rise-fall-rate', indexSwitch === 6 ? 'rise' : 'down' ]">
              <img
                v-if="rateRatio.memberSingleAmountRate < 0"
                src="@/assets/icon/downArrow@2x.png"
                class="arrows"
              >
              <img
                v-if="rateRatio.memberSingleAmountRate > 0"
                src="@/assets/icon/upArrow@2x.png"
                class="arrows"
              >
              <span
                v-if="rateRatio.memberSingleAmountRate > 0"
                style="color:hsl(150deg 53% 58%)"
              > {{ Math.abs(rateRatio.memberSingleAmountRate) + '%' }}</span>
              <span
                v-if="rateRatio.memberSingleAmountRate < 0"
                style="color:hsl(0deg 100% 70%)"
              > {{ Math.abs(rateRatio.memberSingleAmountRate) + '%' }}</span>
              <span v-if="rateRatio.memberSingleAmountRate === 0"> - </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
  rateRatio: {
    type: Object,
    default: () => ({
      couponMemberRate: 0,
      memberPayAmountRate: 0.00,
      memberPayOrderRate: 0.00,
      memberSingleAmountRate: 0,
      newMemberRate: 0,
      payMemberRate: 0,
      totalMemberRate: 0
    })
  },
  oneEchartAllName: {
    type: Array,
    default: () => {
      return []
    }
  }
})

// 内容里的数据改变或窗口变化，重新判断内容和盒子大小比较

watch([() => props.rateRatio], () => {
  judgeSize()
}, { deep: true })

const emit = defineEmits(['update:oneEchartAllName', 'updateEchart'])

onMounted(() => {
  curSelected.value = 0
  const ele = document.getElementsByClassName('week-txt')
  for (let j = 0, len = ele.length; j < len; j++) {
    const arr = props.oneEchartAllName
    arr.push(ele[j].innerText)
    emit('update:oneEchartAllName', arr)
  }
  // 监听游览器窗口变化
  window.addEventListener('resize', function () {
    judgeSize()
  })
})

/**
 * 选择卡片
 */
const curSelected = ref(0)
const indexSwitch = ref(0)
const switchCards = (index) => {
  curSelected.value = index
  indexSwitch.value = index
  emit('updateEchart', index)
}
// 判断内容和盒子的大小
const contentRef = ref(null)
const boxRef = ref(null)
const prevRef = ref(null)
const nextRef = ref(null)
let isMove = false // 当内容宽度大于盒子宽度，isMove为true，反之为false
const judgeSize = () => {
  nextTick(() => {
    if (contentRef.value.clientWidth > boxRef.value.clientWidth) {
      isMove = true
      if (contentRef.value.style.right === '0px') {
        prevRef.value.style.cursor = 'pointer'
      } else {
        nextRef.value.style.cursor = 'pointer'
      }
    } else {
      isMove = false
      prevRef.value.style.cursor = 'not-allowed'
      nextRef.value.style.cursor = 'not-allowed'
      contentRef.value.style.left = ''
      contentRef.value.style.right = ''
    }
  })
}

// 左箭头
const prevPart = () => {
  if (isMove === true) {
    if (contentRef.value.style.left !== '0px') {
      contentRef.value.style.left = '0'
      contentRef.value.style.right = ''
      prevRef.value.style.cursor = 'not-allowed'
      nextRef.value.style.cursor = 'pointer'
    }
  }
}
// 右箭头
const nextPart = () => {
  if (isMove === true) {
    if (contentRef.value.style.right !== '0px') {
      contentRef.value.style.right = '0px'
      contentRef.value.style.left = ''
      prevRef.value.style.cursor = 'pointer'
      nextRef.value.style.cursor = 'not-allowed'
    }
  }
}

defineExpose({
  indexSwitch: indexSwitch.value
})

</script>

<style lang="scss" scoped>
.components-overview-card {
  .card-swiper-box {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 40px;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    p {
      margin: 0;
    }

    // 左右滑动操作箭头
    .slide-left-arrow,
    .slide-right-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: block;
      width: 25px;
      height: 25px;
    }
    .slide-left-arrow img,
    .slide-right-arrow img {
      display: block;
      width: 100%;
      height: 100%;
    }
    .slide-left-arrow {
      left: 0;
    }
    .slide-right-arrow {
      right: 0;
    }
    .slide-right-arrow.enable {
      cursor: pointer;
    }
    .slide-left-arrow.disable {
      cursor: not-allowed;
    }
    .slide-left-arrow:hover,
    .slide-right-arrow:hover {
      opacity: 0.8;
    }
    // 列表
    .card-box {
      position: relative;
      height: 125px;
      margin: 20px 0;
      overflow: hidden;
      .card-list {
        position: absolute;
        .card-item {
          display: inline-block;
          margin-right: 20px;
          width: 200px;
          border: 1px solid #EAF0F4;
          border-radius: 4px;
          padding: 20px;
          box-sizing: border-box;
          cursor: pointer;
          .week-txt {
            color: #666;
            padding-bottom: 10px;
          }
          .strong-num {
            font-size: 20px;
            font-weight: bold;
            padding-bottom: 10px;
          }
          .rise-fall-rate {
            span {
              font-size: 12px;
            }
            .arrows {
              display: inline-block;
              width: 8px;
              height: 10px;
              margin: 0 4px 0 12px;
            }
          }
          .rise-fall-rate.rise {
            span {
              color: #3CC480;
            }
          }
          .rise-fall-rate.down {
            span {
              color: #FF4141;
            }
          }
        }
        .card-item.active {
          border-color: #155bd4;
          background: #edf4ff;
        }
      }
    }
  }
}
</style>
